<div class="container mt-3 mt-md-6 px-0 px-lg-5 px-md-4">
    {%- paginate collection.products by section.settings.products_per_page -%}
      {% assign add_image_border = settings.add_image_border %}
      <div class="row mx-auto mb-6 mb-md-7 {% if add_image_border == true %}border-top border-start{% endif %}">
        {%- for product in collection.products -%}
          <div class="col-6 col-md-4 col-lg-3 px-0 {% if add_image_border == true %}border-end border-bottom{% endif %}">
            {% render 'product-card',
              product_card_product: product,
              media_size: settings.image_ratio,
              show_secondary_image: settings.show_secondary_image,
              add_image_padding: settings.add_image_padding,
              show_vendor: settings.show_vendor     
            %}
          </div>
        {%- endfor -%}
      </div>
      {%- if paginate.pages > 1 -%}
        <div class="mb-6 mb-md-7">
          {% render 'pagination', paginate: paginate, anchor: '', class: '' %}
        </div>
      {%- endif -%}
    {%- endpaginate -%}
</div>
{% schema %}
{
  "name": "Product grid",
  "tag": "section",
  "settings": [
    {
      "type": "range",
      "id": "products_per_page",
      "min": 12,
      "max": 24,
      "step": 4,
      "default": 16,
      "label": "Products per page"
    }
  ]
}
{% endschema %}